<script lang="ts" setup>
import {ref} from "vue"
import pagination from "./pagination.vue"
import {useRouter} from 'vue-router'
import {getFloList} from "../serve"

const
    router = useRouter(),
    itemData:any = ref({list: [{a:''},{a:''},{a:''},{a:''},{a:''},{a:''},{a:''},{a:''}]}),
    fromData = ref({size: 10, page: 1, keyword: ''}),
    ab = ref([]),
    load = ref(true)
;

function get() {
  getFloList({...fromData.value}).then((r:any)=>{
    itemData.value = r
    let a:any = []
    let c = 0
    let list = []
    for (let i = 1; i < r['list'].length + 1; i++) {
      list.push(itemData.value.list[i-1])
      if (i%5 == 0){
        a[c] = list
        list = []
        c++
      }else {
        a[c] = list
      }
    }
    // itemData.value.list = a
    itemData.value['list'] = a
    ab.value = a
    load.value = false
  })
  // console.table(a)
}
get()

function sizeChange(size: number) {
  fromData.value.size = size
  get()
}

function currentChange(currPage: number) {
  fromData.value.page = currPage
  get()
}
</script>

<template>
  <el-scrollbar v-loading="load" element-loading-text="加载中...">
    <el-card>
      <div slot="header">
        <el-input v-model="fromData['keyword']" placeholder="请输入鲜花名称搜索" style="width: 350px;margin-left: 20px;">
          <template #append>
            <el-button icon="Search" @click="get"/>
          </template>
        </el-input>
      </div>
    </el-card>
    <el-card>
      <div v-if="itemData.list.length != 0" info v-for="(i,index) in itemData.list" :key="index">
        <div ify v-for="(e,index) in i" :key="index" @click="router.push({path:'/info-details',query:{id:e['id']}}).catch(()=>true)">
          <img :src="e['image']" alt="">
          <div style="margin-top: 5px">{{e['storeName']}}</div>
          <div style="color: #ea1616;font-weight: bold;margin-top: 10px">{{'¥' + e['price']}}</div>
          <div style="margin-top: 5px;font-size: 12px;color: #666666">{{ e['storeInfo'] }}</div>
        </div>
      </div>
      <div v-else>暂无鲜花信息</div>
      <div v-if="itemData.list.length > 0" page>
        <pagination :pageCurrent="itemData?.current" :pageSize="itemData?.size"
                    :small="true" :total="itemData?.total"
                    class="page" @size-change="sizeChange" @current-change="currentChange"/>
      </div>
    </el-card>
    <div style="width: 100%;height: 200px"/>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
[page] {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
[info]{
  margin: 20px 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  [ify]{
    margin: 20px;
    width: 220px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    img{
      width: 220px;
      height: 220px;
      border-radius: 10px;
    }
  }
}
</style>